<template>
  <view class="gongwei">
    <bazi-section title="先天健康参考">
      <view class="liuqin-containter" v-if="isVip != 1">
        <view class="info">
          <view class="score-box">
            <view class="title">先天体质格局</view>
            <view
              class="score"
              :style="fiveElementInfo(healthResult[0].healthInfo.wuXing)"
              >{{ healthResult[0].healthInfo.wuXing }}强</view
            >
            <view
              class="score"
              :style="fiveElementInfo(healthResult[1].healthInfo.wuXing)"
              >{{ healthResult[1].healthInfo.wuXing }}弱</view
            >
          </view>
        </view>
        <view class="info">
          <view class="score-box">
            <view class="title">健康要点</view>
            <view
              class="score"
              :style="fiveElementInfo(healthResult[0].healthInfo.wuXing)"
            >
              {{ healthResult[0].organHealth.organ }}
            </view>
            <view
              class="score"
              :style="fiveElementInfo(healthResult[1].healthInfo.wuXing)"
            >
              {{ healthResult[1].organHealth.organ }}
            </view>
          </view>
          <view class="example-img-box">
            <image
              class="example-img"
              mode="widthFix"
              src="@/static/images/bazi/fortune/qgwuxing.png"
            />
          </view>
          <view class="score-des">
            {{ healthResult[0].organHealth.diseases }}
          </view>
          <view class="score-des">
            {{ healthResult[0].organHealth.symptoms }}
          </view>
        </view>
        <view class="info">
          <view class="score-box">
            <view class="title">调理方式</view>
            <view
              class="score"
              :style="fiveElementInfo(healthResult[1].healthInfo.wuXing)"
            >
              {{ healthResult[1].organHealth.organ.split("：")[1].split("。")[0] }}
            </view>
          </view>
          <view class="score-des">
            {{ healthResult[1].healthInfo.bestTime }}
          </view>
          <view class="score-des">
            {{ healthResult[1].healthInfo.worstTime }}
          </view>
          <view class="score-des">
            {{ healthResult[1].healthInfo.strongKeyword }}
          </view>
          <view class="score-des">
            {{ healthResult[1].healthInfo.dietTips }}
          </view>
          <view class="score-des">
            {{ healthResult[1].healthInfo.breathingExercise }}
          </view>
          <view class="score-des">
            {{ healthResult[1].healthInfo.herbalTea }}
          </view>
        </view>
      </view>
      <view v-else>
        <no-vip></no-vip>
      </view>
    </bazi-section>
  </view>
</template>
<script>
import { mapGetters } from "vuex";
import baziSection from "./section.vue";
import wuxingColor from "@/utils/wuxing.js";
export default {
  components: {
    baziSection,
  },
  props: {
    result: {
      type: Object,
      default: {},
    },
  },
  computed: {
    ...mapGetters({
      isVip: "user/isVip",
    }),
  },
  watch: {
    result: {
      handler(newVal) {
        this.healthResult = newVal.organHealthInfo;
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      healthResult: this.organHealthInfo,
    };
  },
  mounted() {
    // [0]强 [1]弱
  },
  methods: {
    // 对应五行信息
    fiveElementInfo(str) {
      let { color } = wuxingColor.getWuxingColorInfo(str);
      return `color: ${color}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.gongwei {
  width: 100%;
  box-sizing: border-box;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20rpx 52rpx;
  background: rgba(216, 216, 216, 0.1);
  margin-top: 24rpx;

  .score-box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    .title {
      color: #2c2c2c;
      width: fit-content;
      white-space: nowrap;
      font-size: 28rpx;
      font-weight: bold;
      margin-right: 42rpx;
    }

    .score {
      font-size: 28rpx;
      font-weight: bold;
      margin-right: 22rpx;
    }
  }
}
.score-des {
  margin-top: 20rpx;
}
.example-img-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-self: center;
  margin-top: 20rpx;
}
</style>
